<template>
  <!-- 出库管理（待出库）详情 -->
  <view class="outGodetails">
    <view class="top">
      <van-cell-group>
        <van-field
          :value="form.outboundInfo.applyname"
          name="applyname"
          label="领料人："
        ></van-field>
        <van-field
          :value="form.outboundInfo.outbound_reason"
          name="outbound_reason"
          label="出库原因:"
        ></van-field>
        <van-field
          :value="form.outboundInfo.expect_time"
          name="expect_time"
          title-width="98"
          label="期望领用时间："
        ></van-field>
      </van-cell-group>
    </view>
    <view v-if="outbound_type == '0'">
      <outDetails :list="form.purchasegoodsinfo"></outDetails>
    </view>
    <view class="content" v-else>
      <view class="title flexb">
        <view class="title_left f26">采购商品明细</view>
        <view class="title_right flexb f26">
          <view>共<text>1</text>件商品</view>
          <view class="total ml10">总计：<text>￥{{form.purchasegoodsinfo.reduce((prev,item)=>prev * 1 + item.money_all * 1,0) | number_format(2) }}</text></view>
        </view>
      </view>
      <view class="list_box">
        <view class="list_item f28" v-for="(item, index) in form.purchasegoodsinfo" :key="index">
          <view class="list_item_title flexb">
            <view class="name flexAI f28 fwbold">
              <view class="point br50 mr10"></view>
              <view>{{ item.goods_name }}</view>
            </view>
            <view> 数量：{{ item.goods_num_all }} </view>
          </view>
          <view class="type-inventory flexb">
            <view>使用类型：{{ item.use_type_name }}</view>
            <view>库存：{{ item.stock }}</view>
          </view>
          <view class="subtotal disFlex jcend">
            小计：<text>￥{{ item.money_all }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="current_state-box">
      <view class="current_state"> 当前状态 </view>
      <view class="state_box"> 待出库 </view>
    </view> -->
    <view class="btn_style flexJC">
        <van-button type="default" @click="goBack">返回</van-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      outbound_sn: "", //订单编号
      outbound_type: "", //采购单类型
      outbound_has: false,
      form: {
        outboundInfo: {},
        purchasegoodsinfo: [],
      },
      delivery_Application_FormList: [ ],
    };
  },

  // 监听页面加载，该钩子被调用时
  onLoad(options) {
    this.outbound_sn = options.outbound_sn;
  },
  methods: {
    /*获取表单信息（详情列）*/ 
    async getsndetailList() {
      let res = await this.$ajax.outSndetail({
        outbound_sn: this.outbound_sn,
      });
      if (res.code == 1) {
        this.form.outboundInfo = res.data.outboundInfo;
        this.form.purchasegoodsinfo = res.data.purchasegoodsinfo;
        this.outbound_type = res.data.outboundInfo.outbound_type; //采购单类型
        // 套餐类型
        if (res.data.outboundInfo.outbound_type == "0") {
          this.outbound_has = true;
        }
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*确认修改*/ 
    submint() {
      uni.navigateTo({
        url: "../outboundManagement/outboundApplication",
      });
    },
    /*返回*/ 
    goBack() {
      uni.navigateBack({
        delta: 1, //返回上一级页面
      });
    },
  },

  mounted() {
    this.getsndetailList(); // 获取表单信息（详情列）
  },

  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    uni.setNavigationBarTitle({
      title: "出库详情",
    });
  },

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>

<style lang="scss" scoped>
.outGodetails {
  height: 100%;
  min-height: 100vh;
  background: rgba(244, 244, 244, 1);
  padding-bottom: 20rpx;

  .top {
    background: rgba(255, 255, 255, 1);
  }

  .content {
    .title {
      // display: flex;
      // justify-content: space-between;
      padding: 20rpx 30rpx;

      .title_left {
        color: rgba(153, 153, 153, 1);
        // font-size: 26rpx;
        font-family: SourceHanSansSC-regular;
      }

      .title_right {
        // display: flex;
        // justify-content: space-between;
        color: rgba(153, 153, 153, 1);
        // font-size: 26rpx;
        font-family: SourceHanSansSC-regular;

        text {
          color: red;
          font-weight: bold;
        }

        .total {
          // margin-left: 10rpx;

          text {
            font-weight: bold;
            color: #d12312;
          }
        }
      }
    }

    .list_box {
      .list_item {
        width: 100%;
        line-height: 55rpx;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        // font-size: 28rpx;
        padding: 20rpx 20rpx;
        font-family: SourceHanSansSC-regular;
        border-bottom: 0.5rpx solid #e7e4e4;

        .list_item_title {
          // display: flex;
          // justify-content: space-between;

          .name {
            // display: flex;
            // align-items: center;
            color: rgba(16, 16, 16, 1);
            // font-size: 28rpx;
            font-family: SourceHanSansSC-bold;
            
            // font-weight: bold;

            .point {
              width: 15rpx;
              height: 15rpx;
              // border-radius: 50%;
              background: rgba(98, 177, 88, 1);
              // margin-right: 10rpx;
            }
          }
        }

        .type-inventory {
          // display: flex;
          // justify-content: space-between;

          text {
            color: red;
          }
        }

        .subtotal {
          // display: flex;
          // justify-content: flex-end;

          text {
            color: red;
          }
        }
      }
    }
  }
  .btn_style {
      // display: flex;
      // justify-content: center;
      margin-top: 52rpx;
      ::v-deep.van-button {
        width: 180rpx;
        height: 72rpx;
        border-radius: 66rpx;
        border: 0.5rpx solid rgba(187, 187, 187, 1);
        color: rgba(102, 102, 102, 1);
        font-family: Microsoft Yahei;
      }
    }

  // // 当前状态
  // .current_state-box {
  //   width: 100%;
  //   margin-top: 32rpx;

  //   .current_state {
  //     line-height: 50rpx;
  //   }

  //   .state_box {
  //     width: 100%;
  //     height: 80rpx;
  //     line-height: 80rpx;
  //     background-color: rgba(255, 255, 255, 1);
  //     color: rgba(16, 16, 16, 1);
  //     font-size: 28rpx;
  //     text-align: center;
  //     font-family: Arial;
  //     color: #d12312;
  //     margin-top: 18rpx;
  //   }
  // }

}
</style>